<template>
  <div class="commentCom">
    <template v-if="commentList.length > 0">
      <div
        class="detailComment"
        v-for="(item, index) in commentList"
        :key="index"
      >
        <div class="comLeft" v-if="item.aut_photo">
          <img :src="item.aut_photo" alt="" />
        </div>
        <div class="comLeft" v-else>
          <img src="../../assets/logo.png" alt="" />
        </div>
        <div class="comRight">
          <div class="rTop">
            <span class="rT1">{{ item.aut_name }}</span>
            <span
              class="likeCount"
              @click="comlikeClick(item)"
              :class="{ liking: item.is_liking == true }"
              ><van-icon name="good-job-o" class="rT2" />{{
                item.like_count
              }}</span
            >
          </div>
          <div class="rMid van-multi-ellipsis--l3" @click="textClick(item)">
            {{ item.content }}
          </div>
          <div class="rBot">
            <span class="botTime">{{
              item.pubdate | difftime(item.pubdate)
            }}</span>
            <span class="botNum" @click="rrComClick(item)"
              >{{ item.reply_count }} 回复数量</span
            >
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="detailComment">
        <div class="comNull">点击评论,拿到第一张沙发把~</div>
      </div>
    </template>
    <commentPop></commentPop>
  </div>
</template>

<script>
export default {
  name: 'commentCom',
  data () {
    return {}
  },
  props: ['commentList'],
  components: {
    commentPop: () => import('./commentPop')
  }
}
</script>

<style lang="less" scoped>
.commentCom {
  .detailComment {
    // margin-top: 36.5px;
    display: flex;
    padding: 14px 15px 0;
    .comLeft {
      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
    .comRight {
      flex: 1;
      .rTop {
        display: flex;
        justify-content: space-between;
        .rT1 {
          font-size: 13px;
          color: #3e659a;
        }
        .likeCount {
          font-size: 16px;
        }

        .rT2 {
          vertical-align: text-bottom;
          transform: translateY(-2px);
          margin-right: 2px;
        }
        /deep/ .liking {
          color: red;
        }
      }
      .rMid {
        font-size: 15px;
        line-height: 24px;
        margin-top: 15px;
        margin-bottom: 10px;
        word-break: break-word;
        background-color: #f4f5f6;
      }
      .rBot {
        font-size: 12px;
        line-height: 24px;
        .botTime {
          margin-right: 12.5px;
        }
        .botNum {
          padding: 6px 15px;
          background-color: #dadada;
          border-radius: 24px;
        }
      }
    }
    /deep/ .comNull {
      width: 100%;
      text-align: center;
      font-size: 12px;
      color: #ccc;
    }
  }
}
</style>
